<template>
  <div class="tab-control">
    <template v-for="(title, index) in titles" :key="index">
      <div :class="['item', { active: index === currentIndex }]" @click="tabItemClick(index)">
        <span>{{ title }}</span>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
  titles: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const currentIndex = ref(0)
const emit = defineEmits(['tabItemClick'])
const tabItemClick = (index) => {
  currentIndex.value = index
  emit('tabItemClick', index)
}

const setCurrentIndex = (index) => {
  currentIndex.value = index
}
defineExpose({
  setCurrentIndex,
})

</script>

<style lang="less" scoped>
.tab-control {
  display: flex;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #fff;

  .item {
    flex: 1;
  }

  .active {
    color: var(--primary-color);
    font-weight: 700;
  }

  .item.active span {
    border-bottom: 3px solid var(--primary-color);
    padding: 8px;
  }

}
</style>